<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; border-radius: 5px ; height: 100px ;margin: 50px auto ; }

            .test { background-color: #f4f4f4 ; height: 50px ; }
            /* 当 test 表单内部某个 控件 获得焦点时，设置父元素的样式( 也就是根据 test 内部的元素更改 test 的样式)*/
            .test:focus-within {   background-color: #1e9fff; }

        </style>
    </head>
    <body>

        <div class="wrapper first">
            <form class="test" >
                <input type="text" name="wd">
            </form>
        </div>
        
    </body>
</html>